<template>
	<view>
		<u-navbar title="打印機管理" placeholder>
			<view class="flexleft" slot="left">
				<view @click="backpage">
					<u-icon name="arrow-left" color="#333333" size="20"></u-icon>
				</view>
				<view class="xiaohong margin_left1" style="font-size: 24rpx;padding: 5rpx 10rpx;border: 1rpx solid #ff0000; border-radius: 100rpx;"
					@click="tbdpshow=true">購買印表機</view>
			</view>
			<view class="flexright" slot="right">
				<view class="xiaohui" @click="tianjia">添加</view>
			</view>
		</u-navbar>
		<u-sticky bgColor="#fff">
			<u-tabs lineColor="#FFB800" :scrollable="false" :current="tabsId" lineWidth="15" :activeStyle="{
			             color: '#000000',
			             fontWeight: 'bold',
			             transform: 'scale(1.05)'
			         }" :inactiveStyle="{
			             color: '#666666',
			             transform: 'scale(1)'
			         }" :list="list1" @change="tabChage"></u-tabs>
		</u-sticky>
		<view class="mainpadding2">
			<view class="flexcenter" v-if="!list.data.length">
				<view class="placeholderimage" style="margin-top: 100rpx;" ></view>
			</view>
			<view class="mainpadding_top ffffff radius" v-for="item in list.data" :key="item.id" @click="selectPrint(item)">
				<view class="flexbetween">
					<view class="flexleft">
						<u-icon name="checkmark-circle-fill" v-if="item.ischeck" class="margin_right1" color="#019891" size="28"></u-icon>
						<view class="titletext hei_text bold">{{item.name}}</view>
					</view>
					<u-switch inactiveColor="rgb(230, 230, 230)" v-model="item.kg" activeColor="#feb800" @change="switchchange(item)" :disabled="item.status==2" ></u-switch>
				</view>
				<view class="flexbetween xiaohui margin_top">
					<view class="">編碼：{{item.code}}</view>
					<view class="" v-show="item.data_type==1">金鑰：{{item.secretkey}}</view>
				</view>
				<view class="xiaohui margin_top">
					<!-- <view class="">到期：{{item.endtime_text}}</view> -->
					<view class="xiaohong">紙張類型：{{item.zz_type==1?"58cm":"80cm"}}</view>
				</view>
				<view class="margin_top flexbetween" v-if="tabsId==0">
					<view class="">
						<text class="titletext hei_text bold margin_right1">統編</text>
						<text class="xiaohui">手動列印</text>
					</view>
					<u-switch inactiveColor="rgb(230, 230, 230)" v-model="item.zb_auth" activeColor="#feb800" @change="switchchange(item)" ></u-switch>
				</view>
				<view class="flexright xiaohui margin_top pdl" v-if="item.status==2">
					<!-- <view class="">到期：{{item.endtime_text}}</view> -->
					<view class="xiaohong">過期</view>
				</view>
				<view class="flexbetween xiaohui margin_top pdl" v-if="item.status==1">
					<view class="">到期：{{item.endtime_text}}</view>
					<view class="xiaolv">正常</view>
				</view>
				
				<view class="flexbetween margin_top2" v-if="selectType==0">
					<view class="flexbetween">
						<view class="flexleft margin_right" @click="jumpurl(item)">
							<u-icon name="edit-pen" color="#999" size="16"></u-icon>
							<view class="xiaohei">編輯</view>
						</view>
						<view class="flexleft" v-if="item.status==2">
							<u-icon name="trash" color="#999" size="16" @click="removePrint(item)"></u-icon>
							<view class="xiaohei">刪除</view>
						</view>
					</view>
					<view class="listbtnhuang" @click="xuding(item.id)">續訂</view>
				</view>
			</view>
		</view>
		<view class="posibottom mainpadding" v-if="lastSelectType==5">
			<view class="submitbtn" @click="selectYYPrint">確定</view>
		</view>
		<u-modal :show="show" showCancelButton confirmColor="#ffb800" @cancel="show=false" @confirm="confirm" confirmText="確認" cancelText="取消">
			<view class="slot-content color_ling text_weight text">
				您確定要刪除打印機嗎？
			</view>
		</u-modal>
		<u-popup :show="tbdpshow" mode="center" @close="tbdpshow = false" round="10">
			<view class="mainpadding" style="max-width: 600rpx;">
				<view class="titletext textcenter hei_text bold">購買印表機</view>
				<view class="flexcolumn">
					<image :src="item.image_text" v-for="item in tbShopList" :key="item.id" class="margin_top" style="width: 600rpx;height: 200rpx;" mode="" @click="jumplink(item.url)"></image>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list1: [{
						name: "發票類",
						id: 0,
					},
					{
						name: "收據類",
						id: 1,
					},
					{
						name: "標籤類",
						id: 2,
					}
				],
				tabsId: 0,
				shop_id: uni.getStorageSync("shop_id"),
				list: {
					data: []
				},
				show: false,
				removePrintId: "", //要刪除的打印機的id
				selectType: 0, //1打印機工作臺進入，2工作臺進入，3員工添加選擇進入
				lastSelectType:"",//最终要選擇的打印機类型
				tbdpshow:false,
				tbShopList:[]
			}
		},
		onLoad(options) {
			if (options.selectType) {
				this.selectType = options.selectType
				if(options.type!=3 && options.type!=4 && options.type!=5){
					this.tabsId=options.type
				}
				if(options.type==5){
					this.tabsId=1
				}
				this.lastSelectType=options.type
			}
			this.gettbShopList()
		},
		onShow() {
			this.getPrinterList()
		},
		methods: {
			jumplink(val){
				location.href = val
			},
			xuding(id){
				uni.navigateTo({
					url:"/pages/workbench/dayinjixd?type="+this.tabsId+"&id="+id
				})
			},
			async switchchange(item){
				// uni.showLoading({
				// 	mask:true,
				// 	title:"請稍後"
				// })
				let url = "/api/shop/editPrin"
				let data = {
					shop_id: item.shop_id,
					name: item.name, //打印機名称
					code: item.code, //编碼
					secretkey: item.secretkey, //密钥
					type: item.type, //类型:0=发票,1=收据,2=标签
					id:item.id,//打印機id
					kg:item.kg?1:0,
					zb_auth:item.zb_auth?1:0,
					data_type:item.data_type
				}
				let res = await this.http.request(url, 'POST', data)
				if(res.code==1){
					uni.hideLoading()
					// if(res.code==1){
					// 	this.http.toast("修改成功")
					// }else{
					// 	this.http.toast(res.msg)
					// }
				}
			},
			gettbShopList(){
				this.http.request('/api/index/taobaoshopIndex', 'POST', {
				}).then(res=>{
					this.tbShopList = res.data
				})
			},
			async getPrinterList() { //打印機列表
				let _this = this
				let res = await this.http.request('/api/shop/listPrin', 'POST', {
					shop_id: this.shop_id, //店鋪id
					type:this.tabsId
				})
				if (res.code == 1) {
					res.data.forEach(item=>{
						if(item.zb_auth==1){
							item.zb_auth = true
						}else{
							item.zb_auth = false
						}
						if(item.kg==1){
							item.kg = true
						}else{
							item.kg = false
						}
						this.$set(item,"ischeck",false)
					})
					this.list.data = res.data
				} else if (res.code == 0) {
					this.list.data = res.data
					// this.http.toast(res.msg)
				} else {
					this.http.toast('系統處理中，請稍後再試');
				}
			},
			tabChage(e) {
				this.tabsId = e.id
				this.getPrinterList()
			},
			tianjia() {
				uni.navigateTo({
					url: "/pages/workbench/tianjiadyj"
				})
			},
			jumpurl(item) { //编辑
				uni.navigateTo({
					url: "/pages/workbench/tianjiadyj?id=" + item.id
				})
			},
			removePrint(item) { //刪除
				this.show = true
				this.removePrintId = item.id
			},
			async confirm() { //确定刪除
				let _this = this
				let res = await this.http.request('/api/shop/Prindel', 'POST', {
					shop_id: this.shop_id, //店鋪id
					id: this.removePrintId
				})
				if (res.code == 1) {
					this.http.toast("刪除成功！")
					this.getPrinterList()
				} else if (res.code == 0) {
					this.http.toast(res.msg)
				} else {
					this.http.toast('系統處理中，請稍後再試');
				}
				this.show = false
			},
			selectYYPrint(){
				if(this.tabsId!=1){
					this.http.toast('請選擇收據類打印機');
					return false
				}
				let ids = []
				this.list.data.forEach(item=>{
					if(item.ischeck){
						ids.push(item.id)
					}
				})
				let current = {
					lastSelectType:this.lastSelectType,
					id:ids.join()
				}
				uni.$emit("selectJzInfo",current)
				uni.navigateBack(1)
				
			},
			selectPrint(item){ //从工作站選擇打印機
				if(this.selectType==0){
					return false
				}
				if(this.selectType==1 || this.selectType==3){
					if(item.type==this.lastSelectType){
						uni.$emit("selectInfo",item)
						uni.navigateBack(1)
					}else{
						this.http.toast(`請選擇${this.list1[this.lastSelectType].name}打印機`);
					}
					return false
				}
				if(this.selectType==2 && this.lastSelectType==5){
					item.ischeck = !item.ischeck
					return false
				}
				if(this.selectType==2 && this.lastSelectType!=5){
					if((item.type==this.lastSelectType) || this.lastSelectType==3 || this.lastSelectType==4){
						let current = item
						this.$set(current,"lastSelectType",this.lastSelectType)
						uni.$emit("selectJzInfo",current)
						uni.navigateBack(1)
					}else{
						this.http.toast(`請選擇${this.list1[this.lastSelectType].name}打印機`);
					}
				}
			},
		}
	}
</script>

<style lang="scss" scoped>

</style>